/*
 * @Author: xiaosihan
 * @Date: 2021-04-22 00:42:09
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-11-06 23:51:51
 */

import ReactMixinComponent from "@ReactMixinComponent";
import { toJS } from "mobx";
import React from "react";
import { Camera, MapControls, OrbitControls } from "xsh-react-three";
import { MapControlsProps } from "xsh-react-three";
import MyControllerStore from "./MyControllerStore";
import { ControlType } from "./type";

interface MyControllerProps extends MapControlsProps {

}

interface State {
    initTime: number,
    position: { x?: number, y?: number, z?: number },
    center: { x?: number, y?: number, z?: number },
    enableDamping: boolean, // 惯性
    autoRotate: boolean // 自动旋转
    type: ControlType

}

export default class MyController extends ReactMixinComponent<MyControllerProps, State> {
    constructor(props: MyControllerProps) {
        super(props);
    }

    static defaultProps = {
        type: ControlType.ORBIT
    }

    state: State = {
        // 初始时间 当初始时间改变时,位置和中心点会被重置
        initTime: MyControllerStore.initTime,
        position: toJS(MyControllerStore.position),
        center: toJS(MyControllerStore.center),
        enableDamping: MyControllerStore.enableDamping, // 惯性
        autoRotate: MyControllerStore.autoRotate, // 自动旋转
        type: MyControllerStore.type // 控制器的类型
    }

    static position = toJS(MyControllerStore.position);

    static center = toJS(MyControllerStore.center);

    componentDidMount() {

        // 监听 控制器状态的改变
        this.mixin_autorun(() => {

            const { initTime, position, center, enableDamping, autoRotate, type } = MyControllerStore;

            if (initTime !== this.state.initTime) {
                MyController.position = toJS(position);
                MyController.center = toJS(center);
            }

            this.setState({
                initTime,
                enableDamping,
                autoRotate,
                type,
            });

        });
    }


    render() {
        const { children, ...other } = this.props;
        const { initTime, enableDamping, autoRotate, type } = this.state;

        let Control = (type === ControlType.ORBIT ? OrbitControls : MapControls);

        return (
            <>
                <Control
                    {...{ ...other, initTime, enableDamping, autoRotate }}
                    position={{ ...MyController.position }}
                    center={{ ...MyController.center }}
                    enabled={true}
                    change={(P, C) => {
                        Object.assign(MyController.position, P);
                        Object.assign(MyController.center, C);
                    }}
                >
                    {/* 相机对象 */}
                    <Camera
                    // fov={50}
                    // lookAt={{ x: 0, y: 0, z: 0 }}
                    // position={{ x: 0, y: 8, z: 20 }}
                    // position={{ x: 10, y: 10, z: 10 }}
                    // rotation={{ x: Math.PI / -18, y: 0, z: 0 }}
                    />
                </Control >
            </>
        );

    }
}